<html>
<head>
  <meta charset="UTF-8">
  <title>PK test</title>
  <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.0.min.js"
          integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>

  <script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
      document.getElementById("connect").disabled = connected;
      document.getElementById("disconnect").disabled = !connected;
      $("#response").html();
    }

    function connect() {
      var socket = new SockJS("http://localhost:9292/pk-socket");
      stompClient = Stomp.over(socket);
      stompClient.heartbeat.outgoing = 20000;
      // client will send heartbeats every 20000ms
      stompClient.heartbeat.incoming = 0;
      stompClient.connect({uid:document.querySelector('#uid').value}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        console.log('/user/' + document.querySelector('#uid').value + '/pk-response')

        stompClient.subscribe('/user/' + document.querySelector('#uid').value + '/pk-response', function (response) {
          console.log(response)
        });
      });
    }

    function disconnect() {
      if (stompClient != null) {
        stompClient.disconnect();
      }
      setConnected(false);
      console.log("Disconnected");
    }

    function sendMsg() {
      stompClient.send("/pk/pk.pk", {}, JSON.stringify({
        uid: document.querySelector('#uid').value,
        courseId: document.querySelector('#courseId').value,
        messageType: document.querySelector('#messageType').value,
        groupId: document.querySelector('#groupId').value,
        curIssue: document.querySelector('#curIssue').value,
        answer: document.querySelector('#answer').value
      }));
    }
  </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
  enabled. Please enable
  Javascript and reload this page!</h2></noscript>
<div>
  <div>
    <labal>用户 id</labal>
    <input type="number" id="uid"/>
  </div>
  <div>
    <labal>课程 id</labal>
    <input type="number" id="courseId"/>
  </div>
  <div>
    <labal>消息类型</labal>
    <input type="text" id="messageType"/>
  </div>
  <div>
    <labal>分组 id</labal>
    <input type="text" id="groupId"/>
  </div>
  <div>
    <labal>当前题目</labal>
    <input type="number" id="curIssue"/>
  </div>
  <div>
    <labal>答案</labal>
    <input type="text" id="answer"/>
  </div>

  <button id="connect" onclick="connect();">Connect</button>
  <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
  <button id="sendMsg" onclick="sendMsg();">Send</button>

</div>

</body>
</html>
